import { textTranslate } from '@/servers/api/imController';
import { CommentOutlined, TeamOutlined } from '@ant-design/icons';
import TencentCloudChat, { Message } from '@tencentcloud/chat';
import {
    TUIChat,
    TUIChatHeader,
    TUIContact,
    TUIConversation,
    TUIConversationList,
    TUIKit,
    TUIManage,
    TUIMessageInput,
    TUIMessageList,
} from '@tencentcloud/chat-uikit-react';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
import { getLocale, useLocation, useModel } from '@umijs/max';
import { useEffect, useState } from 'react';
import './index.less';

export default function SampleChat(props) {
    const { chat } = useModel('useTencentIm');
    const location = useLocation();
    const [moduleValue, setModuleValue] = useState('chats');
    const lang = getLocale() === 'zh-CN' ? 'zh' : 'en';
    let onConversationListUpdated = function (event) {
        // console.log(event.data); // 包含 Conversation 实例的数组
    };
    let onConversationInGroupUpdated = function (event) {
        // console.log(event);
        const { groupName, conversationList } = event.data;
        // groupName - 会话分组名
        // conversationList - 分组内的会话列表
    };
    if (chat) {
        chat.on(
            TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED,
            onConversationListUpdated,
        );

        chat.on(
            TencentCloudChat.EVENT.CONVERSATION_IN_GROUP_UPDATED,
            onConversationInGroupUpdated,
        );
    }
    const tabbarList = [
        {
            id: 1,
            name: '消息',
            icon: <CommentOutlined />,
            selectedIcon: (
                <CommentOutlined
                    style={{ color: 'var(--ant-color-primary)' }}
                />
            ),
            value: 'chats',
        },
        {
            id: 2,
            name: '联系人',
            icon: <TeamOutlined />,
            selectedIcon: (
                <TeamOutlined style={{ color: 'var(--ant-color-primary)' }} />
            ),
            value: 'contacts',
        },
    ];
    const switchTabbar = (value: string) => {
        setModuleValue(value);
    };
    async function sendMessage(message: Message, options: any) {
        const resText = await textTranslate({
            from_mobile: message.from,
            to_mobile: message.to,
            text: message.payload.text,
        });

        let level = localStorage.getItem('level')
        if(level=='0'){
            alert('聊天共同功能未开启');
            return false;
        }


        message.payload.text = resText.data;
        message.status = 'success';
        // 2. 发送消息
        chat?.sendMessage(message);
        return message;
    }
    const [conversation, setconversation] = useState();
    useEffect(() => {
        (async () => {
            if (location?.state?.conversationID && chat) {
                const conversationID = location?.state?.conversationID;
                const conversation = await chat.getConversationProfile(
                    conversationID,
                );
                setconversation(conversation.data.conversation);
            }
        })();
    }, [location?.state?.conversationID]);
    return (
        <div style={{ height: 'calc(100vh - 200px)', width: '100%' }}>
            <TUIKit
                chat={chat}
                language={lang}
                activeConversation={conversation}
            >
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        width: '360px',
                    }}
                >
                    {/* <div className="sample-chat-tab">
                        {tabbarList.map((item: any) => {
                            return (
                                <div
                                    className="sample-chat-tab-container"
                                    key={item.id}
                                    onClick={() => {
                                        switchTabbar(item.value);
                                    }}
                                >
                                    {moduleValue === item.value
                                        ? item.selectedIcon
                                        : item.icon}
                                    <p
                                        className={`sample-chat-tab-text ${
                                            moduleValue === item.value
                                                ? 'sample-chat-tab-active'
                                                : ''
                                        }`}
                                    >
                                        {item.name}
                                    </p>
                                </div>
                            );
                        })}
                    </div> */}
                    {moduleValue === 'chats' && (
                        <TUIConversation>
                            <TUIConversationList />
                        </TUIConversation>
                    )}
                    {moduleValue === 'contacts' && <TUIContact />}
                </div>
                <>
                    {/* 右侧对应内容显示 */}
                    {moduleValue === 'chats' && (
                        <>
                            <TUIChat sendMessage={sendMessage}>
                                <TUIChatHeader />
                                <TUIMessageList />
                                <TUIMessageInput />
                            </TUIChat>
                            <TUIManage></TUIManage>
                        </>
                    )}
                    {/* {moduleValue === 'contacts' && (
                        <TUIContact>
                            <TUIContactInfo
                                showChat={() => {
                                    setModuleValue('chats');
                                }}
                            ></TUIContactInfo>
                        </TUIContact>
                    )} */}
                </>
            </TUIKit>
        </div>
    );
}
